<template>
    <div class="profile_page">
        <head-top signin-up='home'>
        </head-top>
        <div class="profile_container">
            <section class="title">
                <h1>{{userName}}</h1>
            </section>
            <el-tabs v-model="activeName" style="min-height: 800px;">
                <el-tab-pane label="Profile" name="first">
                    <el-row class="profile_area" type="flex" justify="space-between">
                        <el-col :span="12">

                            <!--username-->
                            <div class="grid-content bg-purple single-row" style="display: flex">
                                <div class="grid-content bg-purple first">
                                    UserName
                                </div>
                                <el-input v-model="formUserName"></el-input>
                            </div>


                            <!--mobile-->
                            <div class="grid-content bg-purple single-row" style="display: flex">
                                <div class="grid-content bg-purple first">
                                    <span>
                                        Mobile
                                    </span>
                                </div>
                                <el-input v-model="formMobile"></el-input>
                            </div>


                            <div class="grid-content bg-purple single-row" style="display: flex">
                                <div class="grid-content bg-purple first">
                                    <p>
                                        Avatar
                                    </p>
                                </div>
                                <div>

                                    <img class="i-success image-area"
                                         :src="avatar || 'static/img/profile.png'"
                                         alt="Success">
                                </div>
                                <div class="grid-content bg-purple image-upload-area">
                                    <el-upload
                                            class="avatar-uploader"
                                            :action="uploadHost"
                                            name="picture"
                                            :show-file-list="false"
                                            :with-credentials="true"
                                            :headers="myHeaders"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <el-button size="small" type="primary">Upload</el-button>
                                    </el-upload>
                                </div>
                            </div>

                            <div style="text-align: center">
                                <el-button type="success" @click="saveUserInfo">SAVE</el-button>
                            </div>


                        </el-col>


                        <el-col :span="7" :offset="2">
                            <div class="grid-content bg-purple">
                                <div class="i-about-me">
                                    <img src="static/img/thumb66.png"
                                         alt="Thumbnail">
                                    <span>About Me</span>
                                </div>
                                <ul style="margin-top: 26px;" class="content-list">
                                    <li>
                                        <em><span class="num-tip">0</span> Campaigns</em>
                                        <el-tooltip class="item" placement="right-start" effect="light">
                                            <div slot="content">
                                                From the launch to the finish line,
                                                <br>
                                                these were the campaigns you ran to make
                                                <br>
                                                something happen for your entrepreneurial,
                                                <br>
                                                cause-related, or creative passions.
                                            </div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </li>


                                    <li>
                                        <em><span class="num-tip">0</span> Comments</em>
                                        <el-tooltip class="item" placement="right-start" effect="light">
                                            <div slot="content">
                                                From the launch to the finish line,
                                                <br>
                                                these were the campaigns you ran to make
                                                <br>
                                                something happen for your entrepreneurial,
                                                <br>
                                                cause-related, or creative passions.
                                            </div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </li>

                                    <li>
                                        <em><span class="num-tip">0</span> Contributions</em>
                                        <el-tooltip class="item" placement="right-start" effect="light">
                                            <div slot="content">
                                                From the launch to the finish line,
                                                <br>
                                                these were the campaigns you ran to make
                                                <br>
                                                something happen for your entrepreneurial,
                                                <br>
                                                cause-related, or creative passions.
                                            </div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                    </li>

                                </ul>

                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="Campaigns" name="second">
                    <h2>Campaigns I'm On</h2>
                    <section class="campaign-container">
                        <ul>
                            <li class="i-profile-list-item i-profile-list-item-campaigns_on"
                                v-for="(item, index) in campaignList" @click="navigateCampaign(item)">
                                <a class="i-primary-image">
                                    <img src="static/img/go.png"
                                         alt="Primary">
                                </a>
                                <div class="i-content">
                                    <div class="i-campaign">
                                        <a>{{item.title}}</a>
                                        <!--<span class="i-annotation-pill i-pill-draft">Draft</span>-->
                                    </div>
                                    <div class="i-author">
                                        by <a>{{item.ownerName}}</a>
                                    </div>
                                    <div class="i-tagline">

                                    </div>
                                    <div class="i-campaign-id">
                                        Campaign ID: {{item.id}}
                                    </div>

                                </div>
                                <div class="i-action">
                                    <el-dropdown size="medium" split-button @command="handleCommand">
                                        Actions
                                        <el-dropdown-menu slot="dropdown">
                                            <!--<el-dropdown-item>Edit Campaign</el-dropdown-item>-->
                                            <el-dropdown-item
                                                    :command='{type:"delete", campaignId: item.id, index: index}'>Delete
                                                Campaign
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </li>
                        </ul>
                    </section>
                </el-tab-pane>
                <!--<el-tab-pane label="Contributions" name="third">角色管理</el-tab-pane>-->
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import headTop from 'src/components/header/head'
    import Constant from '@/env'
    import footGuide from 'src/components/footer/footGuide'
    import {mapState, mapMutations} from 'vuex'
    import {imgBaseUrl} from 'src/config/env'
    import {getImgPath} from 'src/components/common/mixin'
    import {getToken, setToken, removeToken} from '@/utils/auth'
    import {deleteCampaignByID} from '@/api/campaign'
    import {updateUserInfo} from '@/api/login'


    export default {
        data() {
            return {
                formUserName: '',
                formMobile: '',
                imgBaseUrl: '',
                activeName: 'first',
                uploadHeaders: {},
                campaignList: []
            }
        },
        mounted() {

            var that = this

            this.initData();

            var params = {
                userId: this.userId
            }

            this.$store.dispatch('listCampaignByUID', params).then((res) => {

                if (0 === res.code) {
                    // 如果查询成功
                    that.campaignList = res.page.list;
                }


            }).catch((err) => {
                console.log(err)
            })
        },
        mixins: [getImgPath],
        components: {
            headTop,
            footGuide,
        },
        computed: {
            ...mapState({
                'status': state => state.user.status,
                'userName': state => state.user.name,
                'userId': state => state.user.userId,
                'mobile': state => state.user.mobile,
                'avatar': state => state.user.avatar
            }),
            //后台会返回两种头像地址格式，分别处理
            imgpath: function () {
                let path;
                if (this.avatar.indexOf('/') !== -1) {
                    path = imgBaseUrl + this.avatar;
                } else {
                    path = this.getImgPath(this.avatar)
                }
                this.SAVE_AVANDER(path);
                return path;
            },
            myHeaders: function () {
                return this.uploadHeaders;
            },
            uploadHost() {
                return Constant.baseUrl + '/crowd-api/api/user/updateProfile'
            }
        },

        methods: {
            ...mapMutations([
                'SAVE_AVANDER'
            ]),
            navigateCampaign(item) {
                this.$router.push({
                    path: "/projectDetail", query: {
                        campaignId: item.id
                    }
                })
            },
            initData() {

                this.formUserName = this.userName

                // 添加上传headers
                this.uploadHeaders["token"] = getToken()
                this.uploadHeaders["userId"] = this.userId

                console.log(this.uploadHeaders)

            },
            handleAvatarSuccess(res, file) {
                window.sessionStore.setItem("avatar", res.imageUrl)
                this.$store.dispatch('SET_AVATAR', URL.createObjectURL(file.raw))
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isJPG && isLt2M;
            },
            saveUserInfo() {

                var that = this

                var userInfo = {
                    userName: this.formUserName,
                    mobile: this.formMobile
                }

                updateUserInfo(userInfo).then((res) => {

                    that.$message.success("update success")

                    // 更新全局状态
                    that.$store.dispatch("SET_NAME", that.formUserName)
                })
            },
            handleCommand(command) {
                var that = this

                if ("delete" == command.type) {

                    deleteCampaignByID(command.campaignId).then((res) => {
                        that.campaignList.splice(command.index, 1)
                        that.$message.success("delete success")
                    })

                }

            }
        },
        watch: {
            userInfo: function (value) {
                this.initData()
            }
        }
    }

</script>

<style lang="scss">
    @import 'src/style/mixin';

    .profile_page {
        .profile_container {
            padding: 0 30px;
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
            h1 {
                font-family: "Benton Sans Medium";
                font-size: 40px;
                line-height: 26px;
                letter-spacing: 0;
                margin-top: 0;
            }
            .title {
                margin: 26px 0;
            }
            .profile_area {
                margin-top: 30px;
                .single-row {
                    margin: 26px;
                    .first {
                        min-width: 126px;
                    }
                }
                .image-area {
                    max-width: 226px;
                    max-height: 226px;
                }
                .image-upload-area {
                    margin-top: 26px;
                    margin-left: 66px;
                }
                .i-about-me {
                    display: flex;
                    align-items: center;
                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 30px;
                    }
                    span {
                        vertical-align: middle;
                        font-family: "Benton Sans Medium";
                        font-size: 24px;
                        line-height: 35px;
                        letter-spacing: 0;
                        font-weight: normal;
                        color: #6a6a6a;
                    }

                }
                .content-list {
                    li {
                        margin-top: 16px;
                        font-size: 16px;
                        font-weight: normal;
                        line-height: 26px;
                        letter-spacing: 0;
                        color: #6a6a6a;
                        .num-tip {
                            line-height: 24px;
                            font-style: normal;
                            color: #2a2a2a;
                            margin-right: 2px;
                            font-size: 24px;
                        }
                    }
                }
            }
            .campaign-container {
                .i-profile-list-item {
                    border-top: 1px solid #dddddd;
                    padding: 20px 0;
                    display: flex;
                    .i-campaign {
                        font-family: "Benton Sans", "Helvetica", "sans-serif";
                        font-size: 24px;
                        line-height: 34px;
                        font-weight: normal;
                    }
                    .i-content {
                        margin-left: 26px;
                        .i-author {
                            font-family: "Benton Sans Medium";
                            font-size: 16px;
                            font-weight: normal;
                            line-height: 26px;
                            letter-spacing: 0;
                            color: #6a6a6a;
                            a {
                                color: #E51075;
                            }
                        }
                        .i-campaign-id {
                            margin-top: 10px;
                            color: #a8a8a8;
                            font-family: "Benton Sans", "Helvetica", "sans-serif";
                            font-size: 14px;
                            font-weight: normal;
                            line-height: 20px;
                        }
                    }
                    .i-action {
                        flex: 1;
                        text-align: right;
                        .el-button-group {
                            .el-button {
                                min-width: 126px;
                            }
                        }
                    }
                }
            }
        }

    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
